﻿<!--
 * @?: *********************************************************************
 * @Author: Weidows
 * @Date: 2021-06-10 11:30:14
 * @LastEditors: Weidows
 * @LastEditTime: 2021-11-17 14:54:34
 * @FilePath: \UI-assignment\src\main\webapp\index.html
 * @Description:
 * @!: *********************************************************************
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>UI课设-首页</title>
    <link rel="shortcut icon" href="img/tudoulei.png" type="images/x-5b" />

    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
      .gjianjie img {
        width: 100%;
      }
      .gjianjie .img1 {
        height: 348px;
      }

      .gjianjie p {
        font-size: 16px;
        line-height: 25px;
        color: #333;
      }

      .gjianjie .gjianjie-jiesao {
        padding-top: 20px;
        padding-bottom: 30px;
      }

      .gjianjie h2 {
        margin-top: 10px;
        font-size: 20px;
        font-weight: 600;
      }

      .gjianjie a {
        display: block;
      }

      .gjianjie a embed {
        width: 100%;
        border: solid #eee 1px;
      }

      .news {
        padding-top: 30px;
        padding-bottom: 40px;
      }

      .news div img {
        width: 100%;
        height: 300px;
        border-radius: 3px;
      }

      .news p {
        color: #333;
      }

      .news .newsa {
        background: #3984c0;
        color: #fff;
      }

      .news .newsa:hover {
        background: #466394;
      }

      .news h2 {
        margin-bottom: 20px;
      }

      .news h2 a {
        color: #000;
        margin-bottom: 20px;
      }

      .news h4 a {
        color: #000;
        padding-top: 10px;
      }
    </style>
  </head>
  <body onload="alert('3班A & 3班B')">
    <!--header头部-->
    <header id="header">
      <nav class="navbar" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a class="logo" href="index.html"
              ><img class="logo" src="img/header.jpg" alt=""
            /></a>
          </div>

          <div
            class="collapse navbar-collapse"
            id="bs-example-navbar-collapse-1"
          >
            <ul class="nav navbar-nav navbar-right">
              <li><a class="active" href="#">首页</a></li>
              <li><a href="2.html">其他</a></li>
              <li><a href="about.html">联系我们</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <!--banner-->
    <!--轮播开始-->
    <div
      id="carousel-example-generic"
      class="carousel slide banner"
      data-ride="carousel"
    >
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li
          data-target="#carousel-example-generic"
          data-slide-to="0"
          class="active"
        ></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="img/原神/0.jpg" />
          <div class="carousel-caption"></div>
        </div>
        <div class="item">
          <img src="img/原神/1.png" />
          <div class="carousel-caption"></div>
        </div>
        <div class="item">
          <img src="img/原神/2.png" />
          <div class="carousel-caption"></div>
        </div>
        <div class="item">
          <img src="img/原神/3.jpg" />
          <div class="carousel-caption"></div>
        </div>
      </div>

      <!-- Controls -->
      <a
        class="left carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="prev"
      >
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="right carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="next"
      >
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!--轮播结束-->

    <div class="profile">
      <div class="container">
        <div class="row">
          <h2 class="text-center">文本/列表</h2>
          <div class="col-md-6">
            <p>
              <strong><i>《原神》</i></strong
              >是米哈游开发的一款奇幻题材开放世界动作角色扮演游戏，采用基于抽卡的基本免费及道具收费制。
              <span
                style="color: #990001; font-size: 16px; font-family: sans-serif"
                >马游戏已在Microsoft Windows、Android、iOS、PlayStation
                4和PlayStation
                5平台发行[1]，并预定在任天堂Switch上发行[2][3]。</span
              >
            </p>
            <h3>唐 贺知章</h3>
            <center>
              <p>碧玉妆成一树高，</p>
              <p>万条垂下绿丝绦。</p>
              <p>不知细叶谁裁出，</p>
              <p>二月春风似剪刀。</p>
            </center>
          </div>

          <div class="col-md-6">
            <ol>
              <li class="text-left">
                在一个被称作“提瓦特”的世界，被神明选中的人将被授予引导元素力量的“神之眼”，而最终登上天空岛的人会获得神之心，这些人被称为“原神”。
              </li>
              <li class="text-left">
                玩家将扮演“旅行者”与性格各异、能力独特的同伴们一起冒险旅行，并发掘“原神”的真相[5]。
              </li>
              <li class="text-left">
                玩家可以选择扮演旅行者中的哥哥或者妹妹，寻找自己失散的唯一亲人。
              </li>
            </ol>
            <ul>
              <li class="text-left">
                这里是七种元素交汇的幻想世界“提瓦特”。在遥远的过去，人们借由对神灵的信仰，获赐了驱动元素的力量，得以在荒野中筑起家园。
              </li>
              <li class="text-left">位于提瓦特大陆东北部的自由城邦。</li>
              <li class="text-left">
                群山和广袤的平原间，自由之风携着蒲公英的气息吹拂过果酒湖，为坐落于湖心岛上的蒙德城送去风神巴巴托斯的祝福与恩泽。
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="news">
      <div class="container">
        <h2 class="text-center">图片的应用</h2>
        <div class="row">
          <div class="col-md-4">
            <a href="2.html"
              ><img src="img/原神/index-1.jpg" class="img-xz" alt=""
            /></a>
          </div>
          <div class="col-md-4">
            <a href="2.html">
              <img src="img/中文gif.gif" class="img-xz" alt=""
            /></a>
          </div>
          <div class="col-md-4">
            <a href="2.html"
              ><img src="img/原神/index-2.jpg" class="img-xz" alt=""
            /></a>
          </div>
        </div>
      </div>
    </div>

    <!--footer-->
    <footer id="footer" id="footer">
      <div class="footer-button">
        <div class="container">
          <p>Copyright: 计科1903 A-123456789910 | 联系方式: A-12345678910</p>
        </div>
      </div>

      <!--友情链接-->
      <div class="footer-top link">
        <div class="container">
          友情链接：
          <a target="_blank" href="http://weidows.gitee.io">Weidowsの博客</a>
          <a target="_blank" href="http://www.baidu.com/">百度</a>
          <a target="_blank" href="https://www.sina.com.cn/">新浪</a>
          <a target="_blank" href="http://www.hebau.edu.cn/">河北农业大学</a>
          <a target="_blank" href="http://www.wyw.cn/">中厨网</a>
          <a target="_blank" href="http://www.wyw.cn/">优信二手车</a>
          <a target="_blank" href="http://www.wyw.cn/">落阳地产</a>
          <a target="_blank" href="http://www.hegii.com/">汽车之家</a>
          <a
            target="_blank"
            href="https://shop68294732.taobao.com/?spm=a230r.7195193.1997079397.204.cYt8e7"
            >马克森天猫商城</a
          >
          <a target="_blank" href="resources/压缩包.zip" target="_blank"
            >下载压缩包</a
          >
        </div>
      </div>
    </footer>

    <div class="izl-rmenu">
      <a class="consult" target="_blank"
        ><div class="phone" style="display: none">12345678910</div></a
      >
      <a class="cart"><div class="pic"></div></a>
      <!--回到顶/底部-->
      <a href="#header" class="btn_top"></a>
      <a href="#footer" class="btn_end"></a>
    </div>
  </body>
</html>
